<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1 input{
				background: white;
			}
			
			#div1 input.active{
				background: yellow;
			}
			
			#div1 div{
				padding: 10px 10px;
				width: 203px;
				height: 150px;
				background: #ccc;
				display: none;
			}
			
			#div1 div.active{
			display: block;
			}
		</style>
	</head>
	<body>
	<div id="div1">
		<input type="button" value="前端开发"  class="active">
		<input type="button" value="Android开发" >
		<input type="button" value="UI设计" >
		<div class="active" >HTML\CSS\JavaScript\JS框架</div>
		<div>Java\Android原生\混合</div>
		<div>PS\设计基础</div>
	    </div>
		<script>
			
			var dom=document.getElementById('div1');
			
			var btns=dom.getElementsByTagName('input');
			
			var divs=dom.getElementsByTagName('div');
			
			for (var i = 0; i < btns.length; i++) {
				btns[i].onclick=function() {
					for (var j = 0; j < btns.length; j++) {
						btns[j].style.background='white';
					}
					this.style.background='yellow';
					for(var k=0; k<divs.length;k++) {
						if (this==btns[k]) {
							divs[k].style.display='block';
						}else{
							divs[k].style.display='none';
						}
					}
					
				};
			}
			
		</script>
		
	</body>
</html>
